<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo05-bootstrap4.6栅格系统示例</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../bootstrap-4.6.2-dist/js/bootstrap.js"></script>
    <script src="../bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>

</head>
<body class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://img.zcool.cn/community/017618554460300000019ae90ab7e8.jpg@2o.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://img.zcool.cn/community/011e2d59263a7db5b3086ed4ea0736.jpg@2o.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://img0.baidu.com/it/u=1287682239,464897643&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>
    <p>栅格系统，它的用法，主要是在 任意一个 html标签中，通过添加  class 来对标签的效果进行设置的</p>
    <p>
        关于栅格布局的使用，只需要注意两点：
            第1点：如果要表示一行的内容，那么就在div添加一个class = row 表示一行
            第2点：如果要对一行内容，进行排版，注意：栅格默认会将一行的空间，最多进行12等分
    </p>
    <div class="row">
        <div class="col-md-5" style="background: #0c5460">
            aaaaa
        </div>
        <div class="col-md-4" style="background: #1c7430">
            aaaaa
        </div>
        <div class="col-md-3" style="background: #34ce57">
            aaaaa
        </div>
    </div>
    <div class="row">
        <div class="col-md-2" style="background: #0c5460">
            aaaaa
        </div>
        <div class="col-md-8" style="background: #1c7430">
            aaaaa
        </div>
        <div class="col-md-2" style="background: #34ce57">
            aaaaa
        </div>
    </div>
    <button class="btn btn-outline-danger">这是一个普遍按钮</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>


    <div class="row">
        <div class="col-3">
            <div class="card" style="width: 18rem;">
                <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card" style="width: 18rem;">
                <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card" style="width: 18rem;">
                <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card" style="width: 18rem;">
                <img src="https://t7.baidu.com/it/u=508006830,4042443322&fm=193&f=GIF" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
    </div>



</body>
</html>